<template>
  <div class="point-search-container">
    <div class="search-wrapper">
      <i class="icon" @click="searchList">
        <!-- TODO svg替换 -->
        <!-- <svg-icon icon-class="icon_search" /> -->
        <img class="img_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
      </i>
      <input @confirm="searchList" v-model="keyword" type="text" placeholder="请输入商品关键字" />
    </div>
    <div class="icon-cart" @click="Jump('/pointCart')"></div>
  </div>
</template>

<script>
import Vue from 'vue'
export default Vue.extend({
  name: 'index',
  components: {},
  model: {
    prop: 'p',
    event: 'changePage'
  },
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    searchList() {
      this.p = 1
      this.$emit('changePage', this.p)
      this.$emit('search', this.keyword)
    }
  }
})
</script>

<style lang="scss">
@import "../../../../../styles/mixin";
.point-search-container{
  position:relative;
  padding:30px 25px;
  background:#fff;
  border-radius: 0 0 20px 20px;
  .search-wrapper{
    position:relative;
    width: 90%;
    border-radius: 72px;
    font-size: 0;
    background: #F7F7F7;
    .icon {
      position:absolute;
      width:32px;
      height:32px;
      left:28px;
      top: 50%;
      transform: translateY(-50%);
      color:#999999;
      font-size: 28px;
      font-weight: bold;
      .icon_search{
        width:32px;
        height:32px;
      }
    }
    .img_search{
      display:block;
      width: 28px;
      height: 28px;
    }
    @include placeColor(#999);
    input {
      display: block;
      width:100%;
      height: 72px;
      font-size: 24px;
      margin:0;
      padding:15px 70px;
      border:0;
      background: transparent;
    }
  }
  .icon-cart{
    position:absolute;
    top:42px;
    right:25px;
    display:block;
    width:42px;
    height:50px;
    background:url("https://img.wifenxiao.com/h5-wfx/images/user/point/icon_cart.png") no-repeat;
    background-size:100% 100%;
  }
}
</style>